<template>
    <div class="table-page-search-wrapper">
        <a-form layout="inline" class="poorder-edit">
            <a-row :gutter="48" >
                <a-col :md="item.type=='date' || item.type == 'textarea'?12:formMd6" :sm="item.type=='date' || item.type == 'textarea' ?16:formSm8" v-for="(item,index) of searchParam" :key="index" v-show="index<2||advanced">
                    <a-form-item :label="item.name">
                        <a-row :gutter="48" v-if="item.type=='date'">
                            <date-range @change="changeDate" :fbeginDate="item.fbeginDate" :fendDate="item.fendDate" :type="item.default||3" />
                        </a-row>
                        <a-select v-model="queryParam[item.key]" v-else-if="item.type=='select'">
                            <a-select-option v-for="(option,idx) in item.option" :value="option.value" :key="idx">{{option.text}}</a-select-option>
                        </a-select>
                        <a-input v-model="queryParam[item.key]" v-else-if="item.type=='input'" @keypress.enter="toSearch"></a-input>
                        <stock-select v-else-if="item.type=='stock'" :can-edit="true" @selectStock="stockCb(item.key,$event)" @inputStock="inputCb(item.key,$event)" @enter="stockEnter"/>
                        <a-checkbox v-else-if="item.type == 'checkbox'" :checked="queryParam[item.key]" :defaultChecked="item.defaultChecked?item.defaultChecked:false" @change="changeCheckbox($event,item.key)">{{item.text}}</a-checkbox>
                        <a-textarea v-else-if="item.type == 'textarea'" :rows="2" v-model="queryParam[item.key]"></a-textarea>
                    </a-form-item> 
                </a-col>
                <a-col :md="formMd6" >
                    <span class="table-page-search-submitButtons" >
                        <a-button type="primary" @click="toSearch" icon="search">查询</a-button>
                        <slot />
                        <a @click="advanced = !advanced" style="margin-left: 8px" v-if="searchParam.length>2">
                            {{ advanced ? '收起' : '展开' }}
                            <a-icon :type="advanced ? 'up' : 'down'" />
                        </a>
                    </span>
                </a-col>
            </a-row>
        </a-form>
    </div>
</template>

<script>
import DateRange from '@/components/DateRange'
import StockSelect from '@/components/StockSelect' 
import { constants } from 'crypto';
import { type } from 'os';
export default {
    data(){
        return {
            advanced:false,
            queryParam:{},//查询参数
            formMd6: 6, //form的栅格栏数
            formSm8:8,
            
        }
    },
    props:{
        searchParam:{
            type:Array,
            default:[]
        }
    },
    components:{
        DateRange,
        StockSelect
    },
    created(){
        const _this = this;
        //初始化默认值
        var queryObj = new Object();
        var hasDate = false;
        for(var index in _this.searchParam){
            if(_this.searchParam[index].key && _this.searchParam[index].default!=null && _this.searchParam[index].default!=undefined){
                queryObj[_this.searchParam[index].key] = _this.searchParam[index].default;
            }
            if(_this.searchParam[index].type=="checkbox"){
                queryObj[_this.searchParam[index].key] = false;
            }
            if(_this.searchParam[index].type=="date"){
                hasDate = true;
            }
        }
        _this.queryParam = queryObj;
        if(!hasDate){//Object.keys(_this.queryParam).length>0&&
            _this.toSearch();
        }
    },
    methods:{
        toSearch(){//搜索按钮点击
            const _this = this;
            var queryParam = new Object();
            for(var key in _this.queryParam){
                if(typeof _this.queryParam[key] == "string" || typeof _this.queryParam[key] == "number"){
                    queryParam[key] = _this.queryParam[key];
                }
                if(typeof _this.queryParam[key] == 'boolean'){
                    queryParam[key] = Boolean(_this.queryParam[key]);
                }
            }
            _this.$emit('search', queryParam);
        },
        //时间选择框选择
        changeDate(time){
            const _this = this;
            for(var key in time){
                _this.queryParam[key] = time[key];
            }
            _this.toSearch();
        },
        //仓库输入监听
        inputCb(stock,e){
            const _this = this;
            let stockId = '';
            if(stock){
                _this.queryParam[stock] = e;
                stockId = stock + 'ID';
            }else{
                _this.queryParam.fstock = e;
                stockId = 'fstockID';
            }
            
            if(_this.queryParam.hasOwnProperty(stockId)){
                delete _this.queryParam[stockId];
            }
        },
        //仓库输入回车监听
        stockEnter(){
            this.toSearch();
        },  
        //选择仓库回调
        stockCb(stock,e){
            const _this = this;
            if(stock){
                _this.queryParam[stock] = e.FName;
                //_this.queryParam[stock+'ID'] = e.FID;
            }else{
                _this.queryParam.fstock = e.FName;
                //_this.queryParam.fstockID = e.FID;
            }
            
            _this.toSearch();
        },
        //切换checkbox状态
        changeCheckbox(e,key){
            this.queryParam[key] = e.target.checked;
        }
    }
}
</script>

<style lang="less">
    .container{
        display: inline-block;
    }
</style>


